<template>
  <view>
    <view class="detail">
      <view>
        <view class="detail-item">
          <view class="detail-item-top">
            <view class="detail-item-title">{{detailObj.title}}</view>
            <view class="detail-icon">
              <view class="detail-icon-left">
                <view>{{detailObj.catename}}</view>
              </view>
              <view class="detail-icon-right">
                <view class="detail-icon-right-1">
                  <view>
                    <image src="/static/detail/xbj.png"></image>
                  </view>
                  <view class="detail-icon-right-2">写笔记</view>
                </view>
              </view>
            </view>
          </view>
          <view class="detail-item-bottom-view">
            <rich-text class="detail-item-bottom" :nodes="detailObj.content"></rich-text>
          </view>
        </view>
      </view>
    </view>
    <view class="tabbar">
      <view class="tabbar-left">
        <view class="tabbar-left-item">
          <view>
            <view class="tabbar-left-image">
              <image src="/static/detail/share-line.png"></image>
            </view>
            <view class="tabbar-left-text">分享</view>
          </view>
        </view>
        <view class="tabbar-left-item" @click="clickCollect">
          <view>
            <view class="tabbar-left-image">
              <image :src="collectImg">
              </image>
            </view>
            <view class="tabbar-left-text">收藏</view>
          </view>
        </view>
      </view>
      <view class="tabbar-right">
        <view class="tabbar-right-1" @click="gotoDetail(1)">上一个</view>
        <view class="tabbar-right-2" @click="gotoDetail(2)">下一个</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          id: 0,
          idlist: [],
          i: 0
        },
        detailObj: {},
        collectImg: '',
        // 倒计时的秒数
        seconds: 3,
        // 定时器的 Id
        timer: null
      };
    },
    onLoad(options) {
      this.$data.queryObj.id = options.id;
      this.$data.queryObj.idlist = JSON.parse(options.idlist);
      this.$data.queryObj.i = parseInt(options.i);
      // 调用获取搜素详情数据的方法
      this.getDataDetail()
    },
    methods: {
      // 获取搜素详情数据的方法
      getDataDetail() {
        var that = this;
        var token = uni.getStorageSync('token');
        uni.request({
          url: this.$config.baseApi + '/com/wx/data/getDataDetail',
          method: 'get',
          data: {
            id: that.$data.queryObj.id
          },
          header: {
            token: token
          },
          success: (res) => {
            this.$data.detailObj = res.data;
            if (this.$data.detailObj.collect == 1) {
              this.$data.collectImg = '/static/my/star-line.png';
            } else {
              this.$data.collectImg = '/static/detail/star-line.png';
            }
          }
        });
      },
      // 点击收藏
      clickCollect() {
        var that = this;
        // 收藏
        var type = 1;
        var collect = that.detailObj.collect;
        if (collect == 1) {
          // 取消收藏
          type = 2;
        }
        var token = uni.getStorageSync('token');
        if (token == null || token == '') {
          console.log("点击收藏token=" + token)
          this.delayNavigate()
          return;
        }
        uni.request({
          url: this.$config.baseApi + '/com/wx/collect/toOperateCollect',
          method: 'get',
          data: {
            interviewId: that.$data.queryObj.id,
            type: type
          },
          header: {
            token: token
          },
          success: (res) => {
            if (type == 1) {
              // 收藏
              this.$data.collectImg = '/static/my/star-line.png';
              this.$data.detailObj.collect = 1;
            }
            if (type == 2) {
              // 取消收藏
              this.$data.collectImg = '/static/detail/star-line.png';
              this.$data.detailObj.collect = 0;
            }
          }
        });
        console.log("点击收藏")
      },

      // 延迟导航到 my 页面
      delayNavigate() {
        // 把 data 中的秒数重置成 3 秒
        this.seconds = 3
        // 1. 展示提示消息，此时 seconds 的值等于 3
        this.showTips(this.seconds)
        // 1. 将定时器的 Id 存储到 timer 中
        this.timer = setInterval(() => {
          // 2.1 先让秒数自减 1
          this.seconds--
          // 2. 判断秒数是否 <= 0
          if (this.seconds <= 0) {
            // 2.1 清除定时器
            clearInterval(this.timer)
            // 2.2 跳转到 my 页面
            uni.switchTab({
              url: '/pages/my/my'
            })
            // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
            return
          }
          // 2.2 再根据最新的秒数，进行消息提示
          this.showTips(this.seconds)
        }, 1000)
      },
      // 展示倒计时的提示消息
      showTips(n) {
        // 调用 uni.showToast() 方法，展示提示消息
        uni.showToast({
          // 不展示任何图标
          icon: 'none',
          // 提示的消息
          title: '请登录后再收藏！' + n + ' 秒后自动跳转到登录页',
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1500
        })
      },

      gotoDetail(flag) {
        var id = this.$data.queryObj.id;
        var idlist = this.$data.queryObj.idlist;
        var i = this.$data.queryObj.i;
        if (flag == 1) {
          if (i == 0) {
            // 没有上一个
            uni.showToast({
              title: '没有上一个',
              //将值设置为 success 或者直接不用写icon这个参数
              icon: 'success',
              //显示持续时间为 2秒
              duration: 1000
            })
            return;
          }
          // 上一个
          uni.redirectTo({
            url: '/pages/detail/detail?id=' + idlist[i - 1] + '&idlist=' + JSON.stringify(idlist) + '&i=' + (
              parseInt(i) - 1)
          })
        }
        if (flag == 2) {
          // 下一个
          if (parseInt(i) == idlist.length - 1) {
            // 没有下一个
            uni.showToast({
              title: '没有下一个',
              //将值设置为 success 或者直接不用写icon这个参数
              icon: 'success',
              //显示持续时间为 2秒
              duration: 1000
            })
            return;
          }
          uni.redirectTo({
            url: '/pages/detail/detail?id=' + idlist[i + 1] + '&idlist=' + JSON.stringify(idlist) + '&i=' + (
              parseInt(i) + 1)
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .detail {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detail-item {
    width: 686rpx;
  }

  .detail-item-top {
    border-bottom: 2rpx solid #A6A6A6;
  }

  .detail-item-title {
    word-break: break-all;
    font-size: 26rpx;
    font-weight: bold;
    line-height: 40rpx;
    letter-spacing: 8rpx;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }

  .detail-icon {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 24rpx;
  }

  .detail-icon-left {
    width: 50%;
  }

  .detail-icon-left view {
    border: 2rpx solid #0F86EC;
    color: #0F86EC;
    font-size: 28rpx;
    width: 200rpx;
    text-align: center;
  }

  .detail-icon-right {
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }

  .detail-icon-right-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2rpx solid #ED7927;
    width: 160rpx;
    color: #ED7927;
    border-radius: 26rpx;
  }

  .detail-icon-right-2 {
    font-size: 28rpx;
  }

  .detail-icon-right image {
    display: block;
    width: 38rpx;
    height: 38rpx;
  }

  .detail-item-bottom-view {
    height: 1100rpx;
    overflow: scroll;
  }

  .detail-item-bottom {
    width: 686rpx;
    word-break: break-all;
    font-size: 24rpx;
    line-height: 40rpx;
    letter-spacing: 8rpx;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
  }

  .tabbar {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    width: 100%;
    background-color: #0F86EC;
    border-top: 2rpx solid #A6A6A6;
    background-color: #FFFFFF;
    z-index: 1;
  }

  .tabbar {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tabbar-left {
    width: 40%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .tabbar-left-item {
    width: 50%;
    border-right: 2rpx solid #A6A6A6;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tabbar-left-image image {
    display: block;
    width: 48rpx;
    height: 48rpx;
  }

  .tabbar-left-text {
    font-size: 24rpx;
    color: #A6A6A6;
  }

  .tabbar-right {
    width: 60%;
  }

  .tabbar-right {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .tabbar-right-1 {
    background-color: #F27B1D;
    font-size: 28rpx;
    color: #FFFFFF;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    border-radius: 50rpx;
  }

  .tabbar-right-2 {
    background-color: #E24E44;
    font-size: 28rpx;
    color: #FFFFFF;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    border-radius: 50rpx;
  }
</style>